<template>
  <div>
    <cus-modal
      ref="modal"
      title="详情"
      @on-visible-change="onVisibleChange"
      width="80"
      @onOk="onOk"
      :showOkBtn="false"
      cancelBtnName="关闭"
    >
      <!-- <Form ref="formValidate" :model="form" :label-width="80">
                <div class="formBox" style="margin-bottom:20px">
                    <div class="formBox-item">
                        <FormItem label="更新时间" prop="updateTime">
                            <DatePicker v-model="form.updateTime" format="yyyy-MM-dd" type="daterange" placement="bottom-end" placeholder="请选择更新时间" style="width: 200px"></DatePicker>
                        </FormItem>
                    </div>
                    <div class="formBox-item">
                        <FormItem label="供应时间" prop="supplyTime">
                            <DatePicker v-model="form.supplyTime" format="yyyy-MM-dd" type="daterange" placement="bottom-end" placeholder="请选择供应时间" style="width: 200px"></DatePicker>
                        </FormItem>
                    </div>
                    <div class="formBox-item">
                        <FormItem label="食材名称:" prop="ingredientsName">
                            <Input v-model="form.ingredientsName" maxlength=20 clearable placeholder="请输入食材名称" style="width: 200px">
                            </Input>
                        </FormItem>
                    </div>
                    <div class="formBox-item">
                        <FormItem label="供应商名称:" prop="supplyName" :label-width="100">
                            <Input v-model="form.supplyName" maxlength=20 clearable placeholder="请输入供应商名称" style="width: 200px">
                            </Input>
                        </FormItem>
                    </div>
                    <div class="formBox-item">
                        <FormItem label="食材种类:" prop="ingredientsTypeName">
                            <Select
                                v-model="form.ingredientsTypeName"
                                style="width: 200px"
                                placeholder="请选择食材种类"
                                clearable
                            >
                                <Option :value="item.name" v-for="(item, index) in materialTypeList" :key="index">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </div>
                    <cusButton class="mr_20" type="primary" @onClick="pages.page = 1;historicalPriceListApi()">查询</cusButton>
                    <cusButton class="mr_20" type="primary" @onClick="reset()">重置</cusButton>
                </div>
            </Form> -->
      <Table border :loading="loading" :columns="columns" :data="data">
        <template slot-scope="{ row }" slot="weightFlag">
          {{ row.weightFlag == 0 ? "否" : "是" }}
        </template>
        <template slot-scope="{ row }" slot="createTime">
          {{ row.createTime | formatTime }}
        </template>
        <template slot-scope="{ row }" slot="originalPrice">
          {{ row.originalPrice.toFixed(2) }}
        </template>
      </Table>
      <div style="width: 100%;display: flex;justify-content: flex-end">
        <cus-page
          :data="pages"
          class="mt_10"
          @pageChange="historicalPriceListApi"
        ></cus-page>
      </div>
      <!-- <div class="chart"></div> -->
    </cus-modal>
  </div>
</template>

<script>
import {
  historicalPriceList,
  localfoodtype
} from "@/api/business/dishesModule";

const form = {
  ingredientsId: "",
  ingredientsName: "",
  supplyName: "", // 供应种类
  updateTime: [],
  supplyTime: [],
  ingredientsTypeName: ""
};

export default {
  name: "detailHistoryModal",
  data() {
    return {
      data: [],
      columns: [
        {
          title: "序号",
          width: 70,
          type: "index",
          align: "center"
        },
        {
          title: "食材种类",
          key: "ingredientsTypeName",
          align: "center"
        },
        {
          title: "食材名称",
          key: "ingredientsName",
          align: "center"
        },
        {
          title: "供应商",
          key: "supplyName",
          align: "center"
        },
        {
          title: "单位重量",
          key: "modelWeight",
          align: "center"
        },
        {
          title: "计量单位",
          key: "model",
          align: "center"
        },
        {
          title: "最新价格",
          slot: "originalPrice",
          align: "center"
        },
        // {
        //   title: "称重入库",
        //   slot: "weightFlag",
        //   align: "center"
        // },
        {
          title: "更新时间",
          slot: "createTime",
          align: "center"
        },
        {
          title: "供应时间",
          key: "supplyDate",
          align: "center"
        },
        {
          title: "商品条形码",
          key: "snCode",
          align: "center"
        },
        {
          title: "品牌",
          key: "brand",
          align: "center"
        },
        {
          title: "来源",
          key: "source",
          align: "center"
        }
      ],
      loading: false,
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      },
      form: form,
      ruleValidate: {},
      materialTypeList: []
    };
  },
  mounted() {
    this.form = this.$cu.deepClone(form);
  },
  methods: {
    onVisibleChange(v) {
      if (!v) {
        this.form = this.$cu.deepClone(form);
      }
    },
    show() {
      this.$refs["modal"].show = true;
      this.pages.page = 1;
      this.pages.pageSize = 10;
      this.pages.pageTotal = 0;
      this.historicalPriceListApi();
      this.localfoodtypeApi();
    },
    onOk() {
      this.$refs["formValidate"].validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.form.id) {
            this.modifyUserApi();
          } else this.addUserApi();
        }
      });
    },
    // 重置搜索
    reset() {
      this.$refs["formValidate"].resetFields();
      this.historicalPriceListApi();
    },
    // 查询详情
    historicalPriceListApi() {
      this.loading = true;
      return new Promise(resolve => {
        historicalPriceList({
          ingredientsName: this.form.ingredientsName || null,
          supplyName: this.form.supplyName || null,
          ingredientsTypeName: this.form.ingredientsTypeName || null,
          startDate: this.form.updateTime[0]
            ? new Date(this.form.updateTime[0]).Format("yyyy-MM-dd")
            : null,
          stopDate: this.form.updateTime[1]
            ? new Date(this.form.updateTime[1]).Format("yyyy-MM-dd")
            : null,
          supplyStartDate: this.form.supplyTime[0]
            ? new Date(this.form.supplyTime[0]).Format("yyyy-MM-dd")
            : null,
          supplyStopDate: this.form.supplyTime[1]
            ? new Date(this.form.supplyTime[1]).Format("yyyy-MM-dd")
            : null,
          current: this.pages.page,
          size: this.pages.pageSize,
          ingredientsId: this.form.ingredientsId
        }).then(res => {
          this.loading = false;
          if (res.retCode === 2000) {
            this.data = res.data.records;
            this.pages.pageTotal = res.data.total;
            resolve();
          }
        });
      });
    },
    // 获取食材种类
    localfoodtypeApi() {
      return new Promise(resolve => {
        localfoodtype({}).then(res => {
          if (res.retCode === 2000) {
            this.materialTypeList = res.data;
            resolve();
          }
        });
      });
    }
  }
};
</script>

<style scoped lang="less">
.permission {
  height: 300px;
  width: 500px;
  border: 1px solid #dcdee2;
  overflow-y: auto;
  border-radius: 2px;
  padding: 0 0 0 10px;
}

.chart {
  height: 200px;
  margin-top: 10px;
  background: greenyellow;
}
.formBox {
  width: 100%;
  background: #fff;
  border-radius: 4px;
  box-shadow: 1px 1px 2px 0px rgba(153, 182, 199, 0.2);
  display: flex;
  flex-wrap: wrap;
  &-item {
    margin-right: 48px;
  }
}
</style>
